{{extend './extend.art'}}
{{block 'title'}}Blog - Content Manager{{/block}}
{{block 'body'}}
<body>
    {{include './header.art'}}
    <!-- 主体内容 -->
    <div class = "content">
        {{include './aside.art'}}
        <div class = "main">
            <!-- 分类标题 -->
            <div class = "title">
                <h4>{{@result?result._id:'发表新文章'}}</h4>
            </div>
            <!-- /分类标题 -->
            <!--
                enctype: 指定表单数据的编码类型
                    选项：
                        1. application/x-www-form-urlencoded  默认类型 将数据编程query形式的字符串
                        2. multipart/form-data  如果需要上传图片给服务器 就必须使用这个选项  将表单数据编码成二进制
               因为我们这里需要上传图片 所以这里需要使用 multipart/form-data
            -->
            {{if result==undefined}}
            <form class = "form-container" method = "post" action = "/admin/article-add"
                  enctype = "multipart/form-data">
                {{else if result!=undefined}}
                <form class = "form-container" method = "post" action = "/admin/article-edit?id={{@result&&result._id}}"
                      enctype = "multipart/form-data">
                    {{/if}}
                    <div class = "form-group">
                        <label>标题</label>
                        <input type = "text" value = "{{result&&result.title}}" class = "form-control"
                               placeholder = "请输入文章标题" name = "title">
                    </div>
                    <div class = "form-group">
                        <label>作者</label>
                        <input type = "text" class = "form-control" readonly name = "writer"
                               value = "{{@userInfo.name }}">
                    </div>
                    <div class = "form-group">
                        <label>发布时间</label>
                        <input type = "date" value = "{{result&&dateFormat(result.time,'yyyy-mm-dd')}}"
                               class = "form-control" name = "time">
                    </div>

                    <div class = "form-group">
                        <label>文章封面</label>
                        <input type = "file" name = "cover" id = "file" accept = "image/png, image/jpeg">
                        <div class = "thumbnail-waper">
                            <img class = "img-thumbnail" src = "{{result&&result.cover}}" id = "preview">
                        </div>
                    </div>
                    <div class = "form-group">
                        <label>内容</label>
                        <textarea name = "content" data = "{{result&&result.content}}" class = "form-control"
                                  id = "editor"></textarea>
                    </div>
                    <div class = "buttons">
                        <input type = "submit" class = "btn btn-primary"
                               value = "{{result?'确认修改':'新增文章'}}">
                    </div>
                </form>

        </div>
    </div>
    <!-- /主体内容 -->
    {{include './layout.art'}}
    <script src = "/admin/lib/ckeditor5/ckeditor.js"></script>
    <script type = "text/javascript">

      let editor

      ClassicEditor.create(document.querySelector('#editor')).then(newEditor => {
        editor = newEditor
      }).catch(error => {
        console.error(error)
      })

      // 获取数据
      // const editorData = editor.getData();

      let file = document.getElementById('file')
      // onchange事件主要是用于表单标签
      file.onchange = function () {
        // 1. 创建文件读取对象   FileReader HTML5新增的APi
        let render = new FileReader()
        // 用户的文件选择列表  files属性 包含所有的选择的文件
        // console.log(this.files)
        // 2. 读取文件
        render.readAsDataURL(this.files[0])
        // 3. 监听onload事件
        render.onload = function () {
          let preview = document.getElementById('preview')
          preview.src = render.result

        }
      }

      $('textarea').val($('textarea').attr('data'))

    </script>
</body>
{{/block}}